<%--
  Created by IntelliJ IDEA.
  User: wwh
  Date: 2017/8/1
  Time: 15:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <title>学院管理员个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../static/common/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/static/common/layui/layui.js"></script>
    <script type="text/javascript" src="/static/common/vue.min.js"></script>
    <script type="text/javascript" src="/static/common/axios.min.js"></script>
    <script src="../../static/js/utils.js"></script>
</head>
<body>
<div id="Vue" v-cloak>
    <div class="admin-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>个人信息</legend>
        </fieldset>
        <form class="layui-form" action="" method="post" onsubmit="return false;">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" lay-verify="required" v-model="user.realname" autocomplete="off" class="layui-input" readOnly>
                </div>
                <label class="layui-form-label layui-form-newlabel_ren"><span style="color: red">*</span>工号</label>
                <div class="layui-input-inline">
                    <input type="text" name="workid" v-model="user.workid" autocomplete="off" class="layui-input disabled" placeholder="输入工号" readOnly>
                </div>
            </div>
            <div class="layui-form-item">
                <div v-show="show">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <div v-if="user.sex == 1">
                            <label class="layui-form-label" style="color: #999;text-align: center">男</label>
                        </div>
                        <div v-else="user.sex == 2">
                            <label class="layui-form-label" style="color: #999;text-align: center">女</label>
                        </div>
                    </div>
                </div>
                <div v-show="!show" style="display: none">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input lay-filter="sex" type="radio" name="sex" value="1" title="男" v-model="user.sex">
                        <input lay-filter="sex" type="radio" name="sex" value="2" title="女" v-model="user.sex">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="phone" v-model="user.mobilephone" autocomplete="off" class="layui-input" readOnly>
                </div>
                <label class="layui-form-label">微信</label>
                <div class="layui-input-inline">
                    <input type="text" name="wechat" v-model="user.wechat" autocomplete="off" class="layui-input" readOnly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">QQ</label>
                <div class="layui-input-inline">
                    <input type="text" name="qq" v-model="user.qq" autocomplete="off" class="layui-input" readOnly>
                </div>
                <label class="layui-form-label"><span style="color: red">*</span>电子邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" v-model="user.email" autocomplete="off" class="layui-input" readOnly>
                </div>
            </div>

            <div v-show="show">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" lay-filter="edit" class="layui-btn" @click="update" value="修改">
                    </div>
                </div>
            </div>
            <div v-show="!show" style="display: none">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="save" lay-submit>提交</button>
                        <input type="button" class="layui-btn" @click="reload" value="返回">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var userId = ${sessionScope.currentUser.getId()};
</script>
<script>
    layui.use(['form', 'upload', 'jquery', 'layer', 'laytpl'], function () {
        var form = layui.form(),
            $ = layui.jquery,
            laytpl = layui.laytpl,
            layer = layui.layer,
            divshow = parent.divshow;//header区提示信息

        var vm = new Vue({
            el:'#Vue'
            ,data:{
                show:true,
                user:{
                    id:userId
                },
                schoolAdmin:{
                    userid:userId
                }
            }
            ,methods:{
                /**
                 * 获取user和schoolAdmin信息
                 */
                getInfo:function () {
                    $.ajax({
                        type:"GET",
                        url:'/user/findOneById/'+userId,
                        dataType:"json",
                        success:function (response) {
                            console.log(response.data);
                            vm.user = response.data;
                            console.log(vm.user);
//                            vm.schoolAdmin = response.data.schoolAdmin;
                        },
                        error: function (msg) {
                            console.log(vm.user.id);
                            console.log("失败");
                            console.log(msg);
                        }
                    });
                }
                /**
                 * 返回按钮
                 */
                ,reload:function () {
                    $('#Vue input[type!=button]').attr("readOnly", true).addClass("disabled");
                    vm.show = true;
                    vm.getInfo();
                }
                /**
                 * 修改按钮
                 */
                ,update:function () {
                    vm.show = false;
                    form.render('radio');
                    $('#Vue input[type!=button]').attr("readOnly", false).removeClass("disabled");
                }
            }
        })

        vm.getInfo();

        // 监听提交
        form.on('submit(save)',function () {
           console.log(vm.user);
           var url = '/user/modifyOne';
//           var data = {
//               user:vm.user
//               ,schoolAdmin:vm.schoolAdmin
//           };
           axios.post(url,vm.user)
               .then(function (response) {
                   if (response.data.success)
                       layer.msg("保存成功", {icon: 1, time: 1000}, function () {
                           //同时更新header区提示信息
                           getTips(userId, divshow);
                           vm.reload();
                       });
                   else {
                       layer.msg(response.data.message, {icon: 2, time: 1000}, function () {
                           // vm.reload();
                       });
                   }
               })
               .catch(function (response) {
                   console.log(response);
               })
            return false;
        });
    });
</script>
</body>
</html>
